:global {
  .number-container {
    text-align: center;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    .box-item {
      position: relative;
      height: 86px;
      font-size: 64px;
      line-height: 41px;
      margin: 0;
      text-align: center;
      list-style: none;
      color: #3993dc;
      writing-mode: vertical-lr;
      text-orientation: upright;
      /*文字禁止编辑*/
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      user-select: none;
    }
  }
  .number-item {
    height: 77px;
    width: 53px;
    display: inline-block;
    position: relative;
    // background: url(./number-bg.png) no-repeat center center;
    background-size: 100% 100%;

    background-image: linear-gradient(
        0deg,
        #1c1d21 0%,
        #2c2e32 29%,
        #2f4a5a 35%,
        #1c1d21 48%,
        #303135 54%,
        #434449 60%,
        #457796 65%,
        #1c1d21 77%
      ),
      linear-gradient(#00b0f0, #00b0f0);
    background-blend-mode: normal, normal;
    box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.2), inset 2px 2px 3px 1px rgba(255, 255, 255, 0.02);
    &::before {
      content: '';
      position: absolute;
      left: -5px;
      top: -5px;
      width: 63px;
      height: 88px;
      box-shadow: inset 2px 2px 7px 0px rgba(0, 0, 0, 0.43);
    }
    &:not(:first-child) {
      margin-left: 22px;
    }
    & > span {
      position: relative;
      display: inline-block;
      margin-right: 10px;
      width: 100%;
      height: 100%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      overflow: hidden;
      & > i {
        position: absolute;
        width: 100%;
        top: 0;
        padding: 0 6px;
        // left: 36%;
        transform: translate(-0, 0);
        transition: transform 0.5s ease-in-out;
        letter-spacing: 10px;
      }
    }
  }
}
